<!DOCTYPE html>
<html>
	<?php echo $head; ?>
	<body>
		<!-- Home -->
		<div data-role="page" data-theme="a">
			<div data-theme="b" data-role="header" data-id="head" data-position="fixed">
				<a data-role="button" data-direction="reverse" data-transition="flow" href="<?php echo site_url(); ?>" data-icon="home" data-iconpos="left" class="ui-btn-left">
					Home
				</a>
				<a data-role="button" data-icon="tag" data-iconpos="right" href="<?php echo site_url('jadwal/listview'); ?>" class="ui-btn-right">
					List
				</a>
				<h3>
					Melihat Jadwal
				</h3>
			</div>
			<div data-role="content" data-theme="a">
				<div id="map_canvas" style="height:400px;border-radius:2px;"></div>
				<div data-role="fieldcontain">
					<?php echo form_open('jadwal/detail',array('method' => 'get')); ?>
					<fieldset data-role="controlgroup">
						<input type="hidden" name="id" id="id">
						<input readonly name="stasiun" id="stasiun" placeholder="" value="" type="text" />
						<input type="submit" id="lihat" data-role="button" data-icon="search" value="Lihat">
					</fieldset>
				</div>
			</div>
			<?php echo $foot;?>
		</div>
		<!-- maps -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
		<script src="<?php echo base_url('js/jquery.ui.map.full.min.js'); ?>" type="text/javascript"></script>
		<script>
			$('#map_canvas').gmap({'center' : '<?php echo $center[0]->lat;?>,<?php echo $center[0]->lng;?>', 'zoom':10}).bind('init', function(evt, map) { 
				<?php if($table != NULL): ?>
				<?php foreach($table as $row): ?>
				$('#map_canvas').gmap('addMarker', { 
					'position': '<?php echo $row->lat; ?>,<?php echo $row->lng; ?>',
					'bound' : true
				}).click(function() {
					$('#stasiun').val('Stasiun <?php echo $row->Nama_Stasiun; ?>');
					$('#id').val('<?php echo $row->id; ?>');
				});
				<?php endforeach; ?>
				<?php endif; ?>
				});
	</script>
	</body>
</html>
